<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../Common/css/table-list.css" rel="stylesheet" />
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/table-list.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<link href="../../Common/css/lib/materialize.min.css" rel="stylesheet">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../../Common/css/ufun.css" />
		<title>我的钱包</title>
	</head>
	<style type="text/css">
		body {
			background: var(--color-white) !important;
		}

		header {
			box-shadow: none !important;
			border-bottom: 1px solid var(--color-gray-white);
		}

		.tabs {
			color: yellow !important;
		}

		#ChangeBar {
			background: var(--color-white);
			margin-top: 13vw;
			height: 14vw;
		}

		.divider {
			width: 100%;
			height: 2vw;
			background: var(--color-gray-white);
		}

		#OverviewSection {
			height: 20vw;
			background: var(--color-white);
			display: flex;
			align-items: center;
			padding-left: 6vw;
		}

		#OverviewSection p {
			font-size: 4vw;
			font-weight: 600;
			margin-right: 3vw;
		}
		
		#TotalIncomeMonth {
			position: absolute;
			margin-top: 6vw;
			font-size: 3vw !important;
			color: var(--color-gray-medium);
			font-weight: 200 !important;
		}
		
		h6 {
			color: var(--color-gray-dark);
			margin: 6vw;
		}

		.TransactionCard {
			display: flex;
			justify-content: space-between;
			height: 15vw;
			background: var(--color-white);
			width: 100%;
			padding: 0 6vw;
			margin-top: 3vw;
			border-bottom: 1px solid var(--color-gray-white);
		}

		#LeftCard {
			text-align: left;
			height: inherit;
		}

		#RightCard {
			text-align: right;
			height: inherit;
		}

		#TransactionName,
		#TransactionAmount {
			margin-top: 0.5vw;
			font-size: 4vw;
			font-weight: 600;
			color: var(--color-black);

		}

		#TransactionStatus,
		#TransactionDate {
			font-size: 3vw;
			color: var(--color-gray-medium);
			margin-top: 0.5vw;
		}

		
/* 		#PaymentMethodCard {
			background: var(--color-gray-dark);
			height: 20vw;
			width: 90vw;
			border-radius: 2vw;
			display: flex;
			align-items: center;
			margin: 3vw auto;
		}
		
		#PaymentLogo {
			margin-left: 3vw;
			height: 15vw;
			width: 15vw;
			background: var(--color-white);
			border-radius: 10vw;
		}
		
		#PaymentInfo {
			height: inherit;
			text-align: center;
			align-items: center;
			display: flex;
			margin-left: 4vw;
			color: var(--color-white);
		}
		
		#AddNewPayment {
			background: var(--color-gray-dark);
			height: 10vw;
			width: 90vw;
			border-radius: 2vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 15vw auto;
			color: var(--color-yellow);
		} */
		
	</style>


	<body>
		<!-- 标题栏 -->
		<header>
			<div id="Left" class="com-btn" onmouseup="ThisClose();">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<p id="Title">我的钱包</p>
		</header>

		<!-- 头部三个菜单切换 -->
		<div id="ChangeBar">
			<ul class="tabs row">
				<li class="tab col s3">
					<a onclick="changeListType('month');">
						<h5>当月账单</h5>
					</a>
				</li>
				<li class="tab col s3">
					<a onclick="changeListType('all');">
						<h5>全部账单</h5>
					</a>
				</li>
				<!-- <li class="tab col s3">
					<a onclick="changeListType('paymentMethod');">
						<h5>支付方式</h5>
					</a>
				</li> -->
			</ul>
		</div>


		<div class="divider"></div>
		
		<!-- 每月账单主体 -->
		<div class="MonthlyStatement">
			<div id="OverviewSection">
				<p id="TotalIncomeTitle">本月收益</p>
				<p id="TotalIncome">0.00</p>
				<p id="TotalIncomeMonth">2020/07</p>
			</div>


			<div class="divider"></div>

			<h6>交易记录</h6>
			
			
			<ul id="TransactionHistory" transId="0">
				<!-- 交易记录卡片 -->
				<div id="TransactionTemplate">
					<li class="TransactionCard">
						<div id="LeftCard">
							<p id="TransactionName">交易描述</p>
							<p id="TransactionStatus">交易状态</p>
						</div>
						<div id="RightCard">
							<p id="TransactionAmount">0.00</p>
							<p id="TransactionDate">2020/07/10</p>
						</div>
					</li>
				</div>
			</ul>
		</div>
		
		<!-- <div class="PaymentMethodPage">
			
			<div id="PaymentMethodCard">
				<div id="PaymentLogo"></div>
				<div id="PaymentInfo">
					<p id="PaymenyName">微信支付</p>
				</div>
			</div>
			
			<div id="AddNewPayment">
				添加新的支付方式
			</div>
			
		</div> -->
		
	</body>
	
	<script type="text/javascript">
		var userHash;
		var current;
		var lastEntryId = 0;
		var transIsEnds = false;
		var transLists = ID("TransactionHistory");
		var month;
		var miniRefresh;
		var nowScrollTop = 0;
		
		document.addEventListener('plusready', () => {
			DoWait();
			GetStatusTop();
			userHash = plus.storage.getItem('userHash');
			current = plus.webview.currentWebview();
			drawPage();
			RefreshUserInfo(function(phoneno) {
				drawPage();
			});
			miniRefresh = MakeMiniRefreshWithSwiper('.swiper-container', '#TransactionHistory');
			DoShow(current, 'none', 0);
		});
	
		function changeListType(type) {
			listType = type;
			if (listType == "all") {
				month = "0";
				$("#TotalIncomeMonth").text("");	
				$("#TotalIncomeTitle").text("总合收益");
			} else if (listType == "month"){
				var currentMonth = String2Month(month);
				$("#TotalIncomeMonth").text(currentMonth);
				$("#TotalIncomeTitle").text("本月收益");
			}
			console.log('change to ' + listType);
			// 下面是你处理三个选项卡切换的逻辑
		}
		
		function String2Month(month) {
			return month.slice(0,4) + "/" + month.slice(4);
		}
		
		function drawPage() {
			let userInfo = JSON.parse(plus.storage.getItem('userInfo'));
			if (userInfo === null) return false;
			$('#CampusName').text(userInfo.uEduSchoolName);
			let schoolLen = userInfo.uEduSchoolName.length;


		}
		
		function showList(id) {
			InRefresh = true;
			id = id ? id : 0;
			if (id == 0) {
	
			}
			DoWait();
			// AJAX: listLec
			CallAJAX('getAccount', JSON.stringify({
				"userHash": userHash,
				"lastEntryId": id,
				"month": month
			}), function(data) { // success
				DontWait();
				if (data["res"] == "ok") {
					transIsEnds = true;
					miniRefresh.endDownLoading(true);
					miniRefresh.endUpLoading(true);
				} else {
					transIsEnds = false;
					miniRefresh.endDownLoading();
					miniRefresh.endUpLoading();
				}
				//上面这部分是确定要不要刷新
				
				//下面给加载第一页的情况
				if (id == 0) {
					transIsEnds.innerHTML = "";
					lastEntryId = 0;
				}
				
				let transCnt = transLists.children.length;
				for (let i in data["account"]['entrys']) {
					addLecCard(data["account"]['entrys'][i], transCnt);
				}
				
				newTrans.getElementsById("TotalIncome")[0].innerText = data["account"]['total'];
				
				ID('TransactionHistory').style.opacity = 1;
			}, function() { // error
				DontWait();
				InRefresh = false;
				transIsEnds = true;
				transIsEnds.style.display = "none";
				BadPage.style.display = "block";
				console.log("lection load failed.");
			});
		}
	
		function addLecCard(trans, cnt) {
			if (lastEntryId != 0 && trans["entryId"] >= lastLecId)
				return;
			let newTrans = document.getElementById("TransactionTemplate").lastElementChild.cloneNode(true);
	
			newTrans.setAttribute("entryid", trans["entryId"].toString());
			newTrans.setAttribute("relatedEntityId", trans["relatedEntityId"].toString());
			
			// newTrans.onclick = function() {
			// 	JumpToLec(parseInt(newTrans.getAttribute("lecid")));
			// }
			
			if (trans["typeId"] == 1) {
				newTrans.getElementsById("TransactionName")[0].innerText = "支付问题的悬赏";
				newTrans.getElementsById("TransactionAmount")[0].innerText = " - " + trans["amount"];
			} else if (trans["typeId"]  == 2) {
				newTrans.getElementsById("TransactionName")[0].innerText = "收到答题的悬赏";
				newTrans.getElementsById("TransactionAmount")[0].innerText = " + " + trans["amount"];
			} else if (trans["typeId"] == 3) {
				newTrans.getElementsById("TransactionName")[0].innerText = "支付讲座入场费";
				newTrans.getElementsById("TransactionAmount")[0].innerText = " - " + trans["amount"];
			} else {
				newTrans.getElementsById("TransactionName")[0].innerText = "收到讲座入场费";
				newTrans.getElementsById("TransactionAmount")[0].innerText = " + " + trans["amount"];
			}
			
			newTrans.getElementsById("TransactionDate")[0].innerText = String2Date(trans["time"], true);
						
			transLists.appendChild(newTrans);
			lastEntryId = trans["entryId"];
			transLists.style.display = "block";

		}
	
	</script>
	
</html>
